<script lang="ts" setup name="systemButton">
import MenuTree from './MenuTree.vue';
import PermissionTable from './PermissionTable.vue';
import type { Menu } from '@/index.d';
import { navyMenu } from '@/index';
import { useElementSize } from '@vueuse/core';

const firstSubmenu = navyMenu[0].children as Array<Menu>;

const firstMenu = firstSubmenu[0];

const currentMenu = reactive<Menu>({
  type: firstMenu.type,
  path: firstMenu.path,
  name: firstMenu.name,
  fullPath: firstMenu.fullPath,
  title: firstMenu.title,
  isShow: firstMenu.isShow,
  icon: firstMenu.icon
});

// 用于控制卡片内表格的高度
const detailCardRef = ref();
const { height } = useElementSize(detailCardRef);
</script>
<template>
  <div class="wrapper">
    <el-card class="tree thin-card">
      <template #header>字典类型树</template>
      <template #default>
        <MenuTree v-model:currentMenu="currentMenu" />
      </template>
    </el-card>
    <el-card class="detail thin-card" ref="detailCardRef">
      <template #header>{{ currentMenu.title }}</template>
      <template #default v-if="currentMenu.type === 'item'">
        <PermissionTable v-model:currentMenu="currentMenu" :height="height" />
      </template>
      <template #default v-else> 子菜单没有操作按钮，只有导航菜单才有页面和按钮。 </template>
    </el-card>
  </div>
</template>
<style lang="scss" scoped>
.wrapper {
  height: 100%;
  display: flex;

  .tree {
    flex: 1;
  }

  .detail {
    flex: 5;
    display: flex;
    flex-direction: column;
    :deep(.el-card__body) {
      flex: 1;
    }
  }
}
</style>
